<template>
  <div class="home" :class="{ show: loaded }">
    <!-- <van-nav-bar :border="false" fixed custom-style="background: transparent;">
      <template #title>
        <div class="title">
          项目
        </div>
      </template>
    </van-nav-bar> -->

    <!-- 背景色 -->
    <div class="bg" :style="{ height: navHeight }">
      <slot name="left">
        <view class="left">
          <van-icon
            name="search"
            color="white"
            size="28px"
            @click="searchPage"
          />
        </view>
        <view class="page-title">
          <span>项目</span>
        </view>
      </slot>
    </div>
    <!-- 占位高度 -->
    <div :style="{ height: navHeight }"></div>
    <div class="project-stat">
      <div class="stat-year">
        <uni-data-select
          v-model="year"
          :clear="false"
          :localdata="candidates"
          @change="changeYear"
        />
      </div>
      <div class="stat-count">
        <div>
          <span>{{ projTotal }}</span>
        </div>
        <div style="margin-bottom: 4px">
          项目总数<span>(个)</span>
        </div>
      </div>
      <div class="stat-line"></div>
      <div class="stat-describe">
        <div class="describe-left">
          <div>项目进行中</div>
          <div>{{ inProgress }}</div>
        </div>
        <div class="describe-line"></div>
        <div class="describe-right">
          <div>项目已完成</div>
          <div>{{ complete }}</div>
        </div>
      </div>
    </div>
    <div>
      <van-tabs
        :active="active" class="vanTab" :style="'top:' + topHeight" title-active-color="#739ECA"
        title-inactive-color="#666" line-width="16px" color="#739ECA" line-height="2px" @click="changeTabs"
      >
        <van-tab v-for="(item,index) in tabList" :key="index" :title="item.name">
          <ze-scroll :exclude-tabbar="true" @scrolltolower="handleScrolltolower">
            <project-list :list="list" :project="'tabProject'" @getProjList="getProjList" />
            <uni-load-more :status="moreStatus" />
          </ze-scroll>
        </van-tab>
        <!-- <van-tab title="全部">
          <ze-scroll :exclude-tabbar="true" @scrolltolower="handleScrolltolower">
            <project-list :list="list" :project="'tabProject'" @getProjList="getProjList" />
            <uni-load-more :status="moreStatus" />
          </ze-scroll>
        </van-tab>
        <van-tab title="进行中">
          <ze-scroll :exclude-tabbar="true" @scrolltolower="handleScrolltolower">
            <project-list :list="list" :project="'tabProject'" @getProjList="getProjList" />
            <uni-load-more :status="moreStatus" />
          </ze-scroll>
        </van-tab>
        <van-tab title="已完成">
          <ze-scroll :exclude-tabbar="true" @scrolltolower="handleScrolltolower">
            <project-list :list="list" :project="'tabProject'" @getProjList="getProjList" />
            <uni-load-more :status="moreStatus" />
          </ze-scroll>
        </van-tab> -->
      </van-tabs>
    </div>
  </div>
</template>

<script>
import projectList from './project-list.vue'
import ZeScroll from '@/components/ze-scroll/index.vue'
import { getDeviceInfo } from '@/utils/storage'
import { getApprovalList, getProjectList, getProjectTotal } from '@/apis/project'

export default {
  components: { ZeScroll, projectList },
  data() {
    return {
      tabList: [{ name: '全部', id: '' }, { name: '准备中', id: 'ready' }, { name: '进行中', id: 'doing' },
        { name: '已挂起', id: 'waiting' }, { name: '已交付', id: 'complete' }, { name: '已关闭', id: 'close' }],
      loaded: false,
      navHeight: '0px',
      statusBarHeight: '0',
      navbarHeight: '0',
      topHeight: '0px',
      active: 0,
      candidates: [],
      projTotal: 0, // 项目总数
      inProgress: 0, // 项目进行中
      complete: 0, // 项目完成
      list: [],
      year: '',
      moreStatus: 'more',
      pageNo: 1,
      pageSize: 10,
      projectStatus: '',
    }
  },
  created() {
    const date = new Date()
    this.candidates.push({
      value: '',
      text: '全部',
    })
    for (let i = 0; i < 6; i++) {
      this.candidates.push({
        value: date.getFullYear() - i,
        text: date.getFullYear() - i,
      })
    }
  },
  mounted() {
    this.calcNavHeight()
    this.getProjList()
    this.getProjectTotal()
  },
  methods: {
    // 选择年份
    changeYear(val) {
      this.year = val
      let param
      if (val !== '') {
        param = {
          realStartDate: `${val}-12-31`,
          realEndDate: `${val}-01-01`,
        }
        this.pageNo = 1
      }
      this.getProjList(val)
      this.getProjectTotal(param)
    },
    changeTabs(e) {
      this.pageNo = 1
      if (e.detail.name == 0) {
        this.projectStatus = ''
        this.getProjList()
      } else if (e.detail.name == 1) {
        this.projectStatus = 'ready'
        this.getProjList()
      } else if (e.detail.name == 2) {
        this.projectStatus = 'doing'
        this.getProjList()
      } else if (e.detail.name == 3) {
        this.projectStatus = 'waiting'
        this.getProjList()
      } else if (e.detail.name == 4) {
        this.projectStatus = 'complete'
        this.getProjList()
      } else if (e.detail.name == 5) {
        this.projectStatus = 'close'
        this.getProjList()
      }
    },
    // 获取项目列表
    async getProjList(val) {
      uni.showLoading({
        title: '查询中',
      })
      if (this.pageNo > 1) {
        this.moreStatus = 'loading'
      }
      const params = { pageNo: this.pageNo, pageSize: this.pageSize, projectStatus: this.projectStatus }
      if (this.year) {
        params.realStartDate = `${this.year}-12-31`
        params.realEndDate = `${this.year}-01-01`
      }
      const res = await getProjectList(params)
      const { total, records } = res
      if (this.pageNo === 1) {
        this.list = records
      } else {
        this.list = [...this.list, ...records]
      }
      this.moreStatus = this.list.length >= total ? 'noMore' : 'more'
      uni.hideLoading()
    },
    handleScrolltolower() {
      this.loadMore()
    },
    loadMore() {
      if (['noMore', 'loading'].includes(this.moreStatus)) {
        return
      }
      this.pageNo += 1
      this.getProjList()
    },
    // 跳转搜索页面
    searchPage() {
      uni.navigateTo({
        url: '/pages/project/search/index',
      })
    },
    // 查询项目总数
    async getProjectTotal(param) {
      const res = await getProjectTotal(param)
      res.forEach((item) => {
        if (item.projectStatus === '全部') {
          this.projTotal = item.projectNumber
        } else if (item.projectStatus === '进行中') {
          this.inProgress = item.projectNumber
        } else if (item.projectStatus === '已完成') {
          this.complete = item.projectNumber
        }
      })
    },
    calcNavHeight() {
      const { navbarHeight, statusBarHeight } = getDeviceInfo()
      this.navHeight = `${navbarHeight + statusBarHeight + 10}px`
      this.topHeight = `${navbarHeight + statusBarHeight + 180}px`
      this.loaded = true
      this.statusBarHeight = statusBarHeight
      this.navbarHeight = navbarHeight
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .content_div {
  padding-bottom: 200px;
}
.nav-main {
  position: relative;
}
.title {
  color: #fff;
  width: 148px;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bg {
  background: linear-gradient(180deg, #23479b 0%, #2761a9 100%);
  backdrop-filter: blur(40px);
  position: fixed;
  top: 30;
  width: 100%;
  .left {
    width: 100%;
    height: 32px;
    padding: 0 22rpx;
    margin-top: 16px;
    display: flex;
    z-index: 1;
    align-items: flex-end;
    position: absolute;
    left: 8rpx;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 32rpx;
  }
  .page-title {
    position: absolute;
    top: 50%;
    text-align: center;
    align-items: center;
    width: 100%;
    height: 40px;
    color: #ffffff;
    line-height: 38px;
    font-weight: 500;
  }
}
.project-stat {
  height: 150px;
  background: linear-gradient(180deg, #2556a3 0%, #36afd3 100%);
  backdrop-filter: blur(40px);
  z-index: 99999;
  position: fixed;
  width: 100%;
  .stat-year {
    width: 80px;
    margin-left: 8px;
  }
  .stat-count {
    display: flex;
    color: #fff;
    align-items: flex-end;
    margin-left: 12px;
    margin-bottom: 15px;
    div:nth-child(1) {
      font-size: 28px;
      padding-right: 10px;
    }
    span {
      padding-left: 4px;
    }
  }
  .stat-line {
    height: 1px;
    background: linear-gradient(
      270deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.6) 51%,
      rgba(255, 255, 255, 0) 100%
    );
  }
  .stat-describe {
    display: flex;
    padding-top: 10px;
    color: #fff;
    .describe-left {
      width: 50%;
      text-align: center;
      div:nth-child(1) {
        font-size: 12px;
      }
      div:nth-child(2) {
        font-size: 20px;
      }
    }
    .describe-line {
      width: 1px;
      height: 40px;
      background: linear-gradient(
        360deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 51%,
        rgba(255, 255, 255, 0) 100%
      );
    }
    .describe-right {
      width: 49%;
      text-align: center;
      div:nth-child(1) {
        font-size: 12px;
      }
      div:nth-child(2) {
        font-size: 20px;
      }
    }
  }
}
.vanTab {
  margin-top: -6px;
  position: fixed;
  width: 100%;
}
</style>
<style lang="scss">
.project {
  .van-nav-bar__title {
    color: #fff !important;
  }
}
.vanTab{
	.van-tab{
		padding:0 !important;
		flex-basis:16.6% !important;
	}
}
.stat-year {
  .uni-combox {
    border: none;
  }
  .uni-select__input-placeholder {
    color: #fff;
  }
  .uni-icons {
    color: #fff !important;
  }
  .uni-select {
    border: none;
  }
  .uni-select__input-text {
    color: #fff;
  }
  .uni-select__selector {
    width: 100% !important;
  }
}
</style>
